import { NavBar, InfiniteScroll } from "antd-mobile";
import axios from "axios";
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ListItem from "../../Component/listItem";

const List = () => {
  const { state } = useLocation();
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1)
  const getData = async () => {
    const resp = await axios.post("/api/trip/train", { ...state, page });
    console.log(resp.data.data);
    setList([...list, ...resp.data.data]);
    setPage(page + 1)
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <div>
      <NavBar>
        {state.start}-{state.end}
      </NavBar>
      <div className="list">
        {list.map((v, i) => {
          return <ListItem key={i} v={v}></ListItem>
        })}
      </div>
      <InfiniteScroll hasMore={true} loadMore={getData}></InfiniteScroll>
    </div>
  );
};

export default List;
